<template>
  <div class="wrapper">
    <div class="search">
      <a-input-search
        v-model="book.name"
        placeholder="输入查找的内容"
        enter-button
        @search="onSearch"
      />
    </div>
    <div class="result">
      <a-table :columns="columns" :data-source="bookList">
        <a-button-group slot="downloadInfos" slot-scope="downloadInfos">
          <a-button
            v-for="(item, index) in downloadInfos"
            :key="index"
            type="primary"
            icon="download"
            size="size"
            >{{ item.name }}</a-button
          >
        </a-button-group>
      </a-table>
    </div>
  </div>
</template>

<script>
const columns = [
  /* { */
  /*   dataIndex: "id", */
  /*   key: "id", */
  /*   title: "id", */
  /* }, */
  {
    dataIndex: "title",
    key: "title",
    title: "标题",
  },
  {
    dataIndex: "description",
    key: "description",
    title: "简介",
    ellipsis: true,
  },
  {
    dataIndex: "downloadInfos",
    key: "downloadInfos",
    title: "下载",
    scopedSlots: { customRender: "downloadInfos" },
    width: 400,
  },
];

export default {
  name: "search-book",
  data() {
    return {
      book: {},
      bookList: [],
      columns,
    };
  },
  methods: {
    async onSearch() {
      const { data } = await this.$http.get(
        "https://www.shiyisoushu.com/api/search/v3",
        {
          params: {
            q: this.book.name,
          },
        }
      );

      this.bookList = data.data.content;
    },
  },
};
</script>

<style lang="scss">
.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .result {
    flex: 1;
  }
}
</style>
